<script lang="ts" setup>
import { onMounted, ref, h } from "vue";

import { HomeOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const { push } = useRouter();
// <HomeOutlined />
// const props = defineProps({});

const menuItems = ref([
    {
        key: "back",
        icon: () => h(HomeOutlined),
        label: "返回首页",
        // children: [
        //   {
        //     label: "返回首页",
        //   },
        // ],
    },
]);

const handleClick = (e: any) => {
    if (e && e.key == "back") {
        push({
            path: "/home",
        });
    }
};

onMounted(() => {});
</script>

<template>
    <div>
        <a-menu class="comp-tool-view" style="width: 50px" mode="inline" theme="dark" :items="menuItems" :inlineCollapsed="true" @click="handleClick">
        </a-menu>
    </div>
</template>

<style lang="scss" scoped>
:deep(.comp-tool-view) {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 23.5vw;
    font-size: 1vw;
    text-align: right;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    color: #fff;
    z-index: 9999;
    background: rgba(17, 95, 150, 0.3);
    background-image: linear-gradient(
        90deg,
        rgba(17, 95, 150, 0.5) 0%,
        rgba(0, 27, 47, 0.5) 100%
    );
    border-style: solid;
    border-width: 0.05vw;
    border-image-source: linear-gradient(
        87deg,
        rgba(0, 27, 47, 0.5) 0%,
        rgba(255, 255, 255, 0.2) 100%
    );
    border-image-slice: 1;
    border-top-left-radius: 30%;
    border-bottom-left-radius: 30%;
    .ant-menu-item-active {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    :where(.css-dev-only-do-not-override-19iuou).ant-menu-dark:not(
            .ant-menu-horizontal
        )
        .ant-menu-item:not(.ant-menu-item-selected):active {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
}

// ::v-deep {
//   .ant-menu-light {
//     // background-color: rgba(255, 255, 255, 0.9);
//     background-color: rgba(0, 0, 0, 0.1);
//     color: #cdecff;
//     font-weight: bold;

//     &:hover {
//       background-color: rgba(26, 92, 215, 0.7);
//       .ant-menu-submenu-title {
//         color: #cdecff !important;
//       }
//     }
//   }
//   .ant-menu-submenu-title {
//     padding-left: 0 !important;
//     display: flex;
//     width: 100% !important;
//     margin: 0;
//     padding: 0;
//     height: 50px !important;
//     line-height: 50px !important;
//   }

//   .ant-menu-title-content {
//     width: 100%;
//     display: flex;
//     flex-direction: row;
//     justify-content: center;
//     align-items: center;
//   }

//   .ant-menu-submenu-arrow {
//     display: none;
//   }
// }
</style>